import React, { useCallback } from 'react';
import {
	FormControl,
	Input, 
	Stack, 
	InputGroup, 
	InputLeftAddon, 
	Icon,
	InputRightAddon,
	FormHelperText,
	Button,
	RadioGroup,
	HStack,
	Radio,
	Select,
	Switch,
	FormLabel,
} from '@chakra-ui/react';

import { FaUserAlt, FaLock, FaCheck } from 'react-icons/fa';

export default function SignUpComponent() {

	const onSubmitToEnd = useCallback(() => {
		console.log('onSubmitToEnd');
	}, []);

	return (
		<div className="form-wrapper">
			<Stack spacing="6">
				<FormControl isDisabled isInvalid>
					<InputGroup>
						<InputLeftAddon children={<Icon as={FaUserAlt}></Icon>} />
						<Input placeholder="请输入用户名" maxLength="16"></Input>
					</InputGroup>
					<FormHelperText>用户名是必填项</FormHelperText>
				</FormControl>
			
				<InputGroup>
					<InputLeftAddon children={<Icon as={FaLock}></Icon>} />
					<Input type="password" placeholder="请输入密码" maxLength="16"></Input>
					<InputRightAddon children={<Icon as={FaCheck}></Icon>}></InputRightAddon>
				</InputGroup>

				<RadioGroup defaultValue="Itachi">
					<HStack spacing="24px">
						<Radio value="Sasuke">男</Radio>
						<Radio value="Nagato">女</Radio>
					</HStack>
				</RadioGroup>

				<Select placeholder="前选择学科">
					<option value="ReactJS">ReactJS</option>
					<option value="Java">Java</option>
					<option value="VueJS">VueJS</option>
				</Select>

				<FormControl display="flex" alignItems="center">
					<Switch id="email-alerts" mr="12px"/>
					<FormLabel htmlFor="email-alerts" mb="0">
						是否同意协议
					</FormLabel>
				</FormControl>

				<Button colorScheme="teal" _focus={{boxShadow: 'none'}} onClick={onSubmitToEnd}>注 册</Button>
			</Stack>
		</div>
	)
}